<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>敏感词规则管理</title>
    <style>
        .td-editBtn,
        .td-delBtn {
            border: none;
            cursor: pointer;
            margin: 5px;
            padding: 5px 10px;
            border-radius: 5px;
        }

        .td-editBtn {
            background-color: lightblue;
        }

        .td-delBtn {
            background-color: lightcoral;
        }

        .td-editBtn:hover,
        .td-delBtn:hover {
            /* 透明度 */
            opacity: 0.8;
        }

        .td-editBtn:active,
        .td-delBtn:active {
            background-color: antiquewhite;
        }

        #form1 {
            display: none;
        }
    </style>
</head>

<body>
    <button onclick="form1.style='display: block;'; uid.value='0';">新增规则</button> <!--此处添加了一个手动置0的动作uid.value='0';-->

    <form id="form1" onsubmit="return validForm(this)">
        <!-- 用于修改时保存当前修改的用户ID -->
        <input type="hidden" name="id" id="uid" value="0">
        <div>
            <label>敏感词规则</label>
            <input type="text" name="word" placeholder="输入敏感词过滤规则">
        </div>
        <div>
            <label>保密等级</label>
            <input type="radio" name="w_level" value="3">绝密
            <input type="radio" name="w_level" value="2">秘密
            <input type="radio" name="w_level" value="1" checked>保密 <!--checked默认开启-->
        </div>

        <div>
            <button>提交</button>
        </div>
    </form>

    <table border="1" cellspacing="0" cellpadding="10" align="center">
        <caption>
            <h3>敏感词规则管理</h3>
        </caption>
        <thead>
            <th>ID</th>
            <th>规则描述</th>
            <th>保密等级</th>
            <th>添加时间</th>
            <th>最后变更时间</th>
            <th>功能列表</th>
        </thead>
        <tbody id="tbody"></tbody>
    </table>
    <script>
        window.onload = function () {
            loaddata(); // 加载数据
        }

        function loaddata() {
            fetch("/cgi-bin/keywords").then(resp => resp.json()).then(data => {
                // data的格式： {code: 0, datas: [{id: 1, word: "", w_level: "0", add_time: "", "op_time":""}, {}...]}
                console.log(data);
                if (data.code == 0) {
                    data.datas.forEach(item => {
                        let tr = document.createElement("tr");
                        let td1 = document.createElement("td");
                        let td2 = document.createElement("td");
                        let td3 = document.createElement("td");
                        let td4 = document.createElement("td");
                        let td5 = document.createElement("td");
                        let td6 = document.createElement("td");

                        td1.innerText = item.id;
                        td2.innerText = item.word;
                        td3.innerText = item.w_level == '1' ? "保密" : (item.w_level == '2' ? "秘密" : "绝密");
                        td4.innerText = item.add_time;
                        td5.innerText = item.op_time;

                        // 在td6中添加两个按钮（开启或关闭、删除）
                        let editBtn = document.createElement("button");
                        let delBtn = document.createElement("button");
                        editBtn.innerText = "编辑";
                        delBtn.innerText = "X";
                        // 为两个按钮添加class类
                        editBtn.className = "td-editBtn"
                        delBtn.className = "td-delBtn"

                        // 设置删除按钮的点击事件
                        delBtn.onclick = function () {
                            if (confirm("是否删除" + item.word + "?")) {
                                // [注意： boa只支持get和post请求，其它的暂不支持]
                                fetch("/cgi-bin/delkeywords?id=" + item.id).then(resp => resp.json()).then(data => {
                                    // data:  {code: 0, msg: "删除成功!"}   {code: 1, msg: "数据库连接失败!"}
                                    alert(data.msg);
                                    if (data.code == 0) {
                                        tbody.innerHTML = "";
                                        loaddata(); // 刷新数据
                                    }
                                })
                            }
                        }

                        // // 设置编辑按钮的点击事件
                        // editBtn.onclick = function() {
                        //         document.getElementById("uid").value = item.id;
                        //         _form.word.value = item.word;
                        //         document.querySelector(`input[name="w_level"][value="${item.w_level}"]`).checked = true;
                        //         form1.style = "display: block;";
                        // };
                        //设置编辑按钮的点击事件
                        editBtn.onclick = function(){
                            //当前user用户信息显示在表单中
                            form1.id.value = item.id;
                            form1.word.value = item.word;
                            form1.w_level.value = item.w_level;
                            form1.style = "display:block"//显示表单
                        };


                        td6.append(editBtn, delBtn);

                        tr.append(td1, td2, td3, td4, td5, td6);

                        tbody.append(tr);
                    });

                } else {
                    alert(data.msg);
                }
            })
        }
        function validForm(_form) {
            // 数据验证--自已完成
            let uid = _form.id.value;
            let form_data = {
                word: _form.word.value,
                w_level: _form.w_level.value
            };
            if (uid == '0') {
                // 新增
                fetch(
                    "/cgi-bin/keywords",   // 请求路径 url
                    {
                        method: "POST",
                        body: JSON.stringify(form_data),
                        headers: {
                            "content-type": "application/json;charset=utf-8"
                        }
                    }
                ).then(resp => resp.json()).then(data => {
                    if (data.code == 0) {
                        alert("新增成功");
                        tbody.innerHTML = ""; // 清空原数据
                        loaddata();
                        _form.style = "display: none;"; // 显示表单
                        _form.reset(); // 清空表单数据
                       
                    }
                })
            }
            else {
                // 编辑 
                fetch(
                    `/cgi-bin/keywords?id=${uid}`,   // 请求路径 url
                    {
                        method: "POST",
                        body: JSON.stringify(form_data),
                        headers: {
                            "content-type": "application/json;charset=utf-8"
                        }
                    }
                ).then(resp => resp.json()).then(data => {
                    if (data.code == 0) {
                        alert("修改成功");
                        tbody.innerHTML = ""; // 清空原数据
                        

                        _form.style = "display: none;"; // 显示表单
                        _form.reset(); // 清空表单数据
                        loaddata();
                    }
                })
            }


            return false;
        }
    </script>
</body>

</html>